<script setup lang='ts'>
import { computed, CSSProperties } from 'vue'
const props = defineProps({
  lv:{
    type:Number,
    default:1
  },
  colorBg:{
    type:String,
    default:'var(--d-color-grey-3)'
  },
  colorLv1:{
    type:String,
    default:'#F9DF98'
  },
  colorLv2:{
    type:String,
    default:'#88C6CA'
  },
  colorLv3:{
    type:String,
    default:'var(--theme-color)'
  }
})

const passwordLv = computed(() => {
  return props.lv
})

const nameMap = {1:'低', 2:'中', 3:'高'}
const lvName = computed(() => {
  const name = nameMap[props.lv]
  console.log('111', name)
  return name ? name : ''
})

const getStyle = (lv:number) => {
  const style:CSSProperties = {}
  if (lv > passwordLv.value) {
    style.backgroundColor = props.colorBg
  }
  else if (lv === 1) {
    style.backgroundColor = props.colorLv1
  }
  else if (lv === 2) {
    style.backgroundColor = props.colorLv2
  }
  else if (lv === 3) {
    style.backgroundColor = props.colorLv3
  }
  return style
}
</script>

<template>
  <div class="d-common-flex-row d-common-flex-algin-center">
    <div class="d-common-flex-row wapper">
      <div class="rect rect-lv1" :style="getStyle(1)" />
      <div class="rect rect-lv2" :style="getStyle(2)" />
      <div class="rect rect-lv3" :style="getStyle(3)" />
    </div>
    <span class="lvname d-common-text-base">{{ lvName }}</span>
  </div>
</template>

<style scoped>
.wapper{
  column-gap: 1px;
}
.rect{
  width: 38px;
  height: 8px;
}
.rect-lv1{
  border-radius: 4px 0px 0px 4px;
  opacity: 0.66;
}
.rect-lv2{
  opacity: 0.52;
}
.rect-lv3{
  border-radius: 0px 4px 4px 0px;
}
.lvname{
  font-size: var(--d-font-size-text-second);
  margin-left: 11px;
}
</style>